<template>
    <div>
        <el-form ref="searchForm" :model="searchForm" label-width="100px" >
            <el-row  :gutter="10">
                <el-col :lg="6" :sm="8">
                    <el-form-item label="接口描述">
                        <el-input v-model="searchForm.descr" ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :lg="6" :sm="8">
                    <el-form-item label="接口路径">
                        <el-input v-model="searchForm.interPath" ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :lg="6" :sm="8">
                    <el-form-item label="备注">
                        <el-input v-model="searchForm.remark" ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :lg="6" :sm="8">
                    <el-button id="seaBtn" shape="circle" icon="md-search" @click="onSearch" type="primary">查询</el-button>
                    <el-button id="resBtn" class="mainBtn" shape="circle" icon="md-sync" @click="onReset">重置</el-button>
                </el-col>
            </el-row>
        </el-form>
        <el-table
                :data="tableData"
                ref="table"
                highlight-current-row
                v-loading="loading"
                @row-click="rowSelectionChange"
                @selection-change="handleSelectionChange"
                style="width: 100%">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="interId"
                    label="ID"
            >
            </el-table-column>
            <el-table-column
                    prop="descr"
                    label="描述">
            </el-table-column>
            <el-table-column
                    prop="interPath"
                    label="接口">
            </el-table-column>
            <el-table-column
                    prop="remark"
                    label="备注">
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    import {getAllInterface,insertRoleInterface,getRoleInterface}from '@/api/interfaceApi'
    export default {
        props: {
            params: {
                type: Object,
                default () {
                    return {}
                }
            }
        },
        data(){
            return {
                searchForm:{
                    descr: '',
                    interPath: '',
                    remark: '',
                },
                tableData:[],
                loading: false,
                selection:[],
                form:{
                    roleId: '',
                    interId: []
                }
            }
        },
        methods:{
            submit () {
                return new Promise((resolve, reject) => {
                    this.form={...this.form,...this.searchForm}
                    insertRoleInterface(this.form).then(res => {
                        resolve(res.data)
                    }).catch(e => {
                        reject(e)
                        this.$message.error({
                            message: '抱歉，操作角色遇到异常，请重试或联系管理员处理'
                        })
                    })
                })
            },
            rowSelectionChange (row) {
                this.$refs.table.toggleRowSelection(row)
            },
            handleSelectionChange(rows){
                this.selection=rows
                if(this.selection.length>0){
                    this.form.interId=this.selection.map(it=>it.interId)
                }else{
                    this.form.interId=[]
                }

            },
            onSearch(){
                this.getData();
            },
            onReset(){
                this.searchForm.descr=''
                this.searchForm.interPath=''
                this.searchForm.remark=''
            },
            getData(){
                this.loading=true
                getAllInterface(this.searchForm).then(res=>{
                    this.tableData=res.data.data
                    getRoleInterface({roleId:this.form.roleId}).then(res => {
                       const temp=res.data.data
                        if(this.tableData.length>0&&temp.length>0){
                            this.tableData.forEach(it=>{
                                temp.forEach(item=>{
                                    if(it.interId==item.interId){
                                        this.$refs.table.toggleRowSelection(it,true)
                                    }
                                })

                            })
                        }
                    }).catch(() => {
                        this.$message.error({
                            message: '抱歉，操作角色遇到异常，请重试或联系管理员处理'
                        })
                    })
                    this.loading=false
                }).catch(() => {
                    this.$message.error({
                        message: '抱歉，读取角色信息信息遇到异常，请重试或联系管理员处理'
                    })
                })
            },
        },
        mounted() {
            this.getData()
            this.form.roleId=this.params.roleId
        }
    }
</script>

<style scoped>


</style>
